<template>
  <a-modal v-model:visible="config.visible" :title="config.title" :size="appStore.table.size" @cancel="handleCancel"
    width="70%" @before-ok="handleBeforeOk">
    <a-form ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="rules">
      <a-form-item label="公告标题" field="title">
        <a-input v-model="form.title" />
      </a-form-item>
      <a-form-item label="公告摘要" field="summary">
        <a-input v-model="form.summary" />
      </a-form-item>
      <a-form-item label="公告封面" field="cover">
        <image-upload v-model="form.cover" />
      </a-form-item>
      <!-- <a-form-item label="排序" field="sort">
        <a-input v-model="form.sort" />
      </a-form-item> -->
      <a-form-item label="状态" field="type">
        <a-select v-model="form.status" placeholder="状态">
          <a-option label="首页显示" :value=3 />
          <a-option label="显示" :value=2 />
          <a-option label="隐藏" :value="1" />
        </a-select>
      </a-form-item>
      <a-form-item label="公告内容" field="content">
        <section style="height: 350px">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig"
            :mode="mode" />
          <Editor v-model="form.content" style="overflow-y: hidden" :default-config="editorConfig" :mode="mode"
            @on-created="handleCreated" />
        </section>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import ImageUpload from '@/components/ImageUpload.vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css';

const emit = defineEmits(['ok']);
const labelCol = { style: { width: '100px' } };
const mode = ref('default');
const wrapperCol = { span: 14 };
const editorRef = shallowRef();
const appStore = useAppStore();
const formRef = ref();
const config = reactive({
  visible: false,
  isCreate: false,
  title: '',
});

const form = ref({
  id: undefined,
  title: undefined,
  summary: undefined,
  cover: undefined,
  content: undefined,
  sort: 1,
  status: 0,
});

const resetForm = () => {
  form.value = {
    id: undefined,
    title: undefined,
    summary: undefined,
    cover: undefined,
    content: undefined,
    sort: 1,
    status: 0,
  }
}

const rules = {
  name: [{ required: true, message: '请输入公告标题' }],
  summary: [{ required: true, message: '请输入公告摘要' }],
  content: [{ required: true, message: '请输入公告封面' }],

  // sort: [{ required: true, message: '请输入排序' }],
};

const show = () => {
  formRef.value.resetFields();
  resetForm();
  form.value.status = 1;
  form.value.sort = 1;
  config.isCreate = true;
  config.title = '新增';
  config.visible = true;
};

const showEdit = async (id: any) => {
  formRef.value.resetFields();
  resetForm();
  config.isCreate = false;
  config.title = '编辑';

  try {
    form.value = await axios.get(`/api/admin/system-notice/${id}`);
  } catch (e: any) {
    useHandleError(e);
  }

  config.visible = true;
};

const deleteAt = async (id: any) => {
  try {
    const data = { 'id': id, }
    await axios.postForm<any>(`/api/admin/system-notice/delete`, jsonToFormData(data));
    useNotificationSuccess('操作成功');
    emit('ok');
  } catch (e: any) {
    useHandleError(e);
  }
};

const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };


const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const handleCancel = () => {
  formRef.value.resetFields();
};
const handleBeforeOk = async (done: (closed: boolean) => void) => {
  const validateErr = await formRef.value.validate();
  if (validateErr) {
    done(false);
    return;
  }
  try {
    const url = config.isCreate
      ? '/api/admin/system-notice/create'
      : '/api/admin/system-notice/update';
    await axios.postForm<any>(url, jsonToFormData(form.value));
    useNotificationSuccess('提交成功');
    emit('ok');
    done(true);
  } catch (e: any) {
    useHandleError(e);
    done(false);
  }
};

defineExpose({
  show,
  showEdit,
  deleteAt,
});
</script>

<style lang="less" scoped></style>
